<template>
  <view class="stationPage">
    <view class="scrollview">
      <getdatascrollview ref="getdatascrollview" :api="getdata">
        <template #default="{ list }">
          <u-navbar :autoBack="false">
            <template #left>
              <view></view>
            </template>
            <template #center>
              <view>
                <u-search
                  :customStyle="{
                    width: '600rpx',
                  }"
                  placeholder="搜索"
                  v-model="searchstr"
                  :showAction="false"
                  @change="$u.debounce(searchchange, 500)"
                ></u-search>
              </view>
            </template>
          </u-navbar>
          <view
            class="Stationaddbtn u-flex"
            @click="$z.gopage('/pages/Station/Stationadd')"
          >
            <view class="iconfont iconjia1 mui-icon"></view>
            {{ $z.$t("添加站点") }}
          </view>
          <view class="SituationTJbox">
            <view class="title">{{ $z.$t("设备状况一览") }}</view>
            <view class="list">
              <view class="item">
                <view class="value">{{ SituationTJ.zx }}</view>
                <view class="label">{{ $z.$t("在线") }}</view>
              </view>
              <view class="item">
                <view class="value">{{ SituationTJ.lx }}</view>
                <view class="label">{{ $z.$t("离线") }}</view>
              </view>
              <view class="item">
                <view class="value">{{ SituationTJ.kx }}</view>
                <view class="label">{{ $z.$t("空闲") }}</view>
              </view>
              <view class="item nobefore">
                <view class="value">{{ SituationTJ.cd }}</view>
                <view class="label">{{ $z.$t("充电中") }}</view>
              </view>
            </view>
          </view>
          <view class="" v-for="(item, key) in list" :key="key">
            <stationitem :item="item" v-if="!item.gtel"></stationitem>
            <chargecaritem :item="item" v-else></chargecaritem>
          </view>
        </template>
      </getdatascrollview>
    </view>
    <ztabbar></ztabbar>
  </view>
</template>

<script>
  import stationitem from "./components/StationItem.vue";
  import chargecaritem from "./components/ChargeCaritem.vue";
  export default {
    components: {
      stationitem,
      chargecaritem,
    },
    data() {
      return {
        searchstr: "",
        SituationTJ: {},
        list: [],
        reqdata: [],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      async init() {
        uni.showLoading();
        let user = await this.$store.dispatch("user/getuser");
        let SituationTJ = await this.$z.request("/SituationTJ", {
          sum: 1,
          pcs1: user.pcs,
        });
        this.SituationTJ = SituationTJ[0];
        let StationPid = await this.$z.request("/StationPid", {
          pid: user.pcs,
        });
        StationPid.sort((a, b) => {
          if (a.sjc && b.sjc) {
            if (a.sjc == b.sjc) {
              return a.id - b.id;
            } else {
              var sj = this.$z.timefn.getUTCtime(a.sjc, b.sjc, 1);
              if (sj == 0) {
                return a.id - b.id;
              } else {
                return sj;
              }
            }
          } else {
            return a.id - b.id;
          }
        });
        let ChargeCarPcs = await this.$z.request("/ChargeCarPcs", {
          pcs: user.pcs,
        });
        let list = StationPid.concat(ChargeCarPcs);
        this.list = list;
        this.reqdata = list;
        this.$refs.getdatascrollview.onRefresh();
      },
      async getdata(reqdata) {
        let list = this.list.slice(reqdata.csta, reqdata.csta + reqdata.cmax);
        let pcslist = list.filter((e) => {
          return !e.gtel && !e.ChargeCarPcs;
        });
        let SituationTJreq = {
          sum: pcslist.length,
        };
        pcslist.forEach((e, i) => {
          SituationTJreq[`pcs${i + 1}`] = e.id;
        });
        if (pcslist.length != 0) {
          let SituationTJ = await this.$z.request(
            "/SituationTJ",
            SituationTJreq
          );
          let SituationTJoption = {};
          SituationTJ.forEach((e) => {
            SituationTJoption[e.pcs] = e;
          });
          list.forEach((e) => {
            if (SituationTJoption[e.id]) {
              e.ChargeCarPcs = SituationTJoption[e.id];
            }
          });
        }
        return list;
      },
      async searchchange() {
        if (this.searchstr == "") {
          this.list = this.reqdata;
          this.$refs.getdatascrollview.onRefresh();
          return;
        }
        let StationPid = await this.$z.request("/StationPid", {
          pcs: this.searchstr,
        });
        this.list = StationPid;
        this.$refs.getdatascrollview.onRefresh();
      },
    },
  };
</script>

<style>
  page {
    background: #efeff4;
  }
</style>
<style lang="scss">
  .Stationaddbtn {
    margin: 20rpx;
    background: #fff;
    height: 88rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      margin-right: 8rpx;
    }
  }

  .SituationTJbox {
    background: #ffffff;
    margin-bottom: 20px;
  }

  .SituationTJbox .title {
    font-size: 18px;
    padding: 12px 10px;
  }

  .SituationTJbox .list {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 0 40px 14px 40px;
  }

  .SituationTJbox .list .item {
    width: 0;
    flex: 1;
    position: relative;
  }

  .SituationTJbox .list .item::before {
    content: "";
    width: 1px;
    background: #aaaaaa;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .nobefore::before {
    display: none;
  }

  .SituationTJbox .list .item .value {
    color: #2095f5;
    font-size: 14px;
    line-height: 1;
  }

  .SituationTJbox .list .item .label {
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1;
    padding-top: 14px;
  }

  .stationPage {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .scrollview {
      height: 0;
      flex: 1;
    }
  }
</style>
